<!DOCTYPE html>
<html dir="{{ direction }}" lang="{{ lang }}">
<head>
	<meta charset="UTF-8"/>
	<title>{{ title }}</title>
	<base href="{{ base }}"/>
	<link href="{{ bootstrap_css }}" type="text/css" rel="stylesheet" media="screen"/>
	<link href="{{ icons }}" type="text/css" rel="stylesheet"/>
	<script src="{{ jquery }}" type="text/javascript"></script>
	<script src="{{ bootstrap_js }}" type="text/javascript"></script>
	<link href="{{ stylesheet }}" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">
	{% for order in orders %}
	<div style="page-break-after: always;">
		<h1>{{ text_picklist }} #{{ order.order_id }}</h1>

		<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-xl-4">

			<div class="col">
				<div class="form-control-plaintext p-0 border rounded mb-3">
					<p class="lead p-2 mb-0"><strong>{{ text_invoice }}</strong>
						<br/>
						{{ order.invoice_no }}
					</p>
				</div>
			</div>

			<div class="col">
				<div class="form-control-plaintext p-0 border rounded mb-3">
					<p class="lead p-2 mb-0"><strong>{{ text_order_id }}</strong>
						<br/>
						{{ order.order_id }}
					</p>
				</div>
			</div>

			<div class="col">
				<div class="form-control-plaintext p-0 border rounded mb-3">
					<p class="lead p-2 mb-0"><strong>{{ text_date_added }}</strong>
						<br/>
						{{ order.date_added }}
					</p>
				</div>
			</div>

			<div class="col">
				<div class="form-control-plaintext p-0 border rounded mb-3">
					<p class="lead p-2 mb-0"><strong>{{ text_store }}</strong>
						<br/>
						{{ order.store_name }}
					</p>
				</div>
			</div>

			<div class="col">
				<div class="form-control-plaintext p-0 border rounded mb-3">
					<p class="lead p-2 mb-0"><strong>{{ text_store }} Address</strong>
						<br/>
						{{ order.store_address }}
					</p>
				</div>
			</div>

			<div class="col">
				<div class="form-control-plaintext p-0 border rounded mb-3">
					<p class="lead p-2 mb-0"><strong>{{ text_shipping_method }}</strong>
						<br/>
						{{ order.shipping_method }}
					</p>
				</div>
			</div>

			<div class="col">
				<div class="form-control-plaintext p-0 border rounded mb-3">
					<p class="lead p-2 mb-0"><strong>{{ text_contact }}</strong>
						<br/>
						{{ order.store_telephone }}
					</p>
				</div>
			</div>

		</div>
	</div>

	<table class="table table-bordered">
		<thead>
			<tr>
				<td colspan="2">{{ text_order_detail }}</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<address>
						<strong>{{ order.store_name }}</strong>
						<br/>
						{{ order.store_address }}
					</address>
					<b>{{ text_telephone }}</b> {{ order.store_telephone }}
					<br/>
					<b>{{ text_email }}</b> {{ order.store_email }}
					<br/>
					<b>{{ text_website }}</b> <a href="{{ order.store_url }}">{{ order.store_url }}</a></td>
				<td style="width: 50%;"><b>{{ text_date_added }}</b> {{ order.date_added }}
					<br/>
					{% if order.invoice_no %}
						<b>{{ text_invoice_no }}</b> {{ order.invoice_no }}
						<br/>
					{% endif %}
					<b>{{ text_order_id }}</b> {{ order.order_id }}
					<br/>
					{% if order.shipping_method %}
						<b>{{ text_shipping_method }}</b> {{ order.shipping_method }}
						<br/>
					{% endif %}</td>
			</tr>
		</tbody>
	</table>
	<table class="table table-bordered">
		<thead>
			<tr>
				<td style="width: 50%;"><b>{{ text_shipping_address }}</b></td>
				<td style="width: 50%;"><b>{{ text_contact }}</b></td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>{{ order.shipping_address }}</td>
				<td>{{ order.email }}
					<br/>
					{{ order.telephone }}</td>
			</tr>
		</tbody>
	</table>
	<table class="table table-bordered">
		<thead>
			<tr>
				<td><b>{{ column_location }}</b></td>
				<td><b>{{ column_reference }}</b></td>
				<td><b>{{ column_product }}</b></td>
				<td><b>{{ column_weight }}</b></td>
				<td><b>{{ column_model }}</b></td>
				<td class="text-end"><b>{{ column_quantity }}</b></td>
			</tr>
		</thead>
		<tbody>
			{% for product in order.product %}
				<tr>
					<td>{{ product.location }}</td>
					<td>{% if product.sku %}
							{{ text_sku }} {{ product.sku }}
							<br/>
						{% endif %}
						{% if product.upc %}
							{{ text_upc }} {{ product.upc }}
							<br/>
						{% endif %}
						{% if product.ean %}
							{{ text_ean }} {{ product.ean }}
							<br/>
						{% endif %}
						{% if product.jan %}
							{{ text_jan }} {{ product.jan }}
							<br/>
						{% endif %}
						{% if product.isbn %}
							{{ text_isbn }} {{ product.isbn }}
							<br/>
						{% endif %}
						{% if product.mpn %}
							{{ text_mpn }}{{ product.mpn }}
							<br/>
						{% endif %}</td>
					<td>{{ product.name }}
						{% for option in product.option %}
							<br/>
							&nbsp;
							<small> - {{ option.name }}: {{ option.value }}</small>
						{% endfor %}</td>
					<td>{{ product.weight }}</td>
					<td>{{ product.model }}</td>
					<td class="text-end">{{ product.quantity }}</td>
				</tr>
			{% endfor %}
		</tbody>
	</table>
	{% if order.comment %}
		<table class="table table-bordered">
			<thead>
				<tr>
					<td><b>{{ text_comment }}</b></td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>{{ order.comment }}</td>
				</tr>
			</tbody>
		</table>
	{% endif %}
</div>
{% endfor %}
</div>
</body>
</html>
